import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import {
	getSettings,
	getUserWorksDetail,
	InitWorkDetail,
	IWorkDetail,
	userCancelFavoriteWork,
	userCancelLikeWork,
	userFavoriteWork,
	userLikeWork,
} from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import dayjs from 'dayjs';
import { Spin } from 'antd';

interface IWorkDetailProps
	extends RouteComponentProps<{
		id: string;
	}> {}

export default function WorkDetail(props: IWorkDetailProps) {
	const [dataDetail, setDataDetail] = useState<IWorkDetail>(InitWorkDetail);
	const [tabMap, setTabMap] = useState<Map<number, string>>();
	const [loading, setLoading] = useState(false);
	useEffect(() => {
		const id = props.match.params.id;
		fetchData(id);
		getSettings().then((res) => {
			const map = new Map();
			const tabs = res.data.scratch_tags;
			tabs.forEach((item) => {
				map.set(item.id, item.name);
			});
			setTabMap(map);
		});
	}, []);

	const fetchData = (id: number | string) => {
		setLoading(true);
		getUserWorksDetail(id)
			.then((res) => {
				setDataDetail(res.data);
			})
			.finally(() => {
				setLoading(false);
			});
	};

	const handleLikeWork = (id: number, isLiked: boolean) => {
		if (isLiked) {
			userCancelLikeWork(id)
				.then((res) => {
					fetchData(id);
				})
				.catch(() => {});
		} else {
			userLikeWork(id)
				.then((res) => {
					fetchData(id);
				})
				.catch(() => {});
		}
	};

	const handleFavoriteWork = (id: number, isFavorite: boolean) => {
		if (isFavorite) {
			userCancelFavoriteWork(id)
				.then((res) => {
					fetchData(id);
				})
				.catch(() => {});
		} else {
			userFavoriteWork(id)
				.then((res) => {
					fetchData(id);
				})
				.catch(() => {});
		}
	};

	return (
		<div className="content">
			<div className="d-f jc">
				<Spin spinning={loading}>
					<div className="w1200 bg-w plr20">
						<div className="fs30 strong pt40">{dataDetail.name}</div>
						<div className="d-f ac fs16 ptb20">
							<img
								className="w48 br100"
								src={dataDetail.creator.avatar || require('../../image/user2.png').default}
								alt=""
							/>
							<span className="pl20">{dataDetail.creator.name}</span>
							<span className="pl20">创建于{dayjs.unix(dataDetail.created_ts).format('YYYY-MM-DD')}</span>
							<span className="pl40 c-hint-b">
								<img className="pr10" src={require('../../image/eye.png').default} alt="" />
								<span>{dataDetail.num_favorites}</span>
								<img className="plr10" src={require('../../image/good.png').default} alt="" />
								<span>{dataDetail.num_likes}</span>
							</span>
						</div>
						<div className="d-f as">
							<iframe
								style={{ width: 728, height: 506 }}
								src={`${process.env.REACT_APP_BASESCRATCH}?isPlayerOnly=true&projectUrl=${dataDetail.url}`}
								frameBorder="0"
							></iframe>
							<div>
								<div className="pl80 d-f fd-c jc-b h100">
									<div>
										<div className="fs24 strong">作品介绍：</div>
										<div className="fs16 pt30">
											{dataDetail.instruction || '作者没有介绍作品呢~~'}
										</div>
										<div className="fs24 strong pt80">操作说明：</div>
										<div className="fs16 pt30">
											{dataDetail.description || '作者很懒，没有留下任何操作说明！'}
										</div>
									</div>
									<div>
										<div className="pb20">
											{dataDetail.tag_ids.map((tabId) => {
												return (
													<div
														key={`tab_${tabId}`}
														className="d-il ptb6 plr12 bg-theme3 c-theme br100 fs16 mr20"
													>
														{tabMap?.get(tabId)}
													</div>
												);
											})}
										</div>
										<a
											href={`${process.env.REACT_APP_BASESCRATCH}?projectUrl=${dataDetail.url}`}
											target="_blank"
											className="d-il ptb14 plr22 bg-theme c-text-w br10 fs18 cp"
										>
											查看创作页
										</a>
									</div>
								</div>
							</div>
						</div>
						<div className="d-f ac ptb20 fs16">
							<div
								className="d-f ac mr24 cp"
								onClick={() => {
									handleLikeWork(dataDetail.id, dataDetail.liked);
								}}
							>
								{dataDetail.liked ? (
									<>
										<img className="pr10" src={require('../../image/liked.png').default} alt="" />
										<span className="c-theme">{dataDetail.num_likes}</span>
									</>
								) : (
									<>
										<img className="pr10" src={require('../../image/like.png').default} alt="" />
										<span>{dataDetail.num_likes}</span>
									</>
								)}
							</div>
							<div
								className="d-f ac cp"
								onClick={() => {
									handleFavoriteWork(dataDetail.id, dataDetail.favorited);
								}}
							>
								{dataDetail.favorited ? (
									<>
										<img
											className="pr10"
											src={require('../../image/collected.png').default}
											alt=""
										/>
										<span className="c-theme">已收藏</span>
									</>
								) : (
									<>
										<img className="pr10" src={require('../../image/collect.png').default} alt="" />
										<span>收藏</span>
									</>
								)}
							</div>
						</div>
					</div>
				</Spin>
			</div>
			<Footer {...props} />
		</div>
	);
}
